<template>
     <div class="mobile_header flex-between" :class="propValue.fixed?'fixed':''">
        <div>
            <img  :src="propValue.img" :style="setimgStyle(propValue)" alt="">
        </div>
       <img  id="header_icon" :style="iconStyle(propValue)" class="right_icon" :src="propValue.iconImg" alt="">

       <ul id="header_menu" class="flex-wrap" :style="{'background':itemStyle.backgroundColor}">
            <li class="header_menu_item" :class="item.isChildren?'header_menu_item'+i:''"  v-for="(item, i) of propValue.headerList" :key="i">
                <a :href="item.isChildren?'javascript:;':item.link">
                    <div style="position:relative;">
                        {{item.name}}
                    <img v-if="item.isChildren" class="hadlist_icon" src="https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/image/1660037297694zk.png" alt="">
                    </div>
                </a>
              <ul class="menu_children" :class="item.isChildren?'menu_children'+i:''">
                <li class="header_menu_item sub_header_menu_item" v-for="(ptiem,p) of item.Children" :key="p">
                 <a :href="ptiem.link">
                   {{ptiem.name}}
                 </a>
                </li>
              </ul>
            </li>
       </ul>
     </div>
</template>

<script>
export default {
  name: "MobileHeader",
  props: {
    propValue: {
      type: Object,
      default: () => {},
      deep:true
    },
    swiperList: {
      type: Array,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
    itemStyle: "",
  },
  data() {
    return {
        childrenIndex:[]
    }
  },
  created(){
    let childrenIndex=[]
    for(var i=0;i<this.propValue.headerList.length;i++){
        if(this.propValue.headerList[i].isChildren){
            childrenIndex.push(i)
        }
    }
    let Mobile_header=JSON.parse(localStorage.getItem('Mobile_header'))
    if(Mobile_header){
     localStorage.setItem('Mobile_header',JSON.stringify(Array.from(new Set(childrenIndex.concat(Mobile_header)))))
    }else{
       localStorage.setItem('Mobile_header',JSON.stringify(Array.from(new Set(childrenIndex))))
    }
    // this.childrenIndex=childrenIndex
  },
  mounted(){
    $("#header_icon").click(()=>{
        //  $(this).addClass('select').siblings().removeClass('select');
         if($("#header_menu").is(':hidden')){
            $('#header_menu').show(250)
        }else{
            $('#header_menu').hide(250)
        }
    })
    let childrenIndex=JSON.parse(localStorage.getItem('Mobile_header'))
    for(let item of childrenIndex){
        console.log(item)
         $(`#header_menu>.header_menu_item${item}`).click(function() {
              if($(`.menu_children${item}`).is(':hidden')){
                     $(`.menu_children${item}`).show(200)
                }else{
                     $(`.menu_children${item}`).hide(200)
                }
        });
    }
  },
  methods:{
    setimgStyle(value){
        return{
            width:value.imgwidth+'rem',
            height:value.imgheight+'rem',
            "margin-top":value.logotop+'rem',
            "margin-left":value.logoleft+'rem'
        }
    },
    iconStyle(value){
         return{
            width:value.iconwidth+'rem',
            height:value.iconheight+'rem',
            "margin-top":value.icontop+'rem',
            "margin-right":value.iconright+'rem'
        }
    },
  }
}
</script>

<style lang="scss" scoped>
a{
    color: inherit;
}
.mobile_header{
 width: 100%;
 height: 100%;
position: relative;
}
.right_icon{
    width: 21rem;
    height: 16rem;
    margin-top:15rem;
    margin-right: 16rem;
}
#header_menu{
    position: absolute;
    width: 154rem;
    // height: 242rem;
    max-height: 350rem;
    overflow-y: auto;
    right:16rem;
    text-align: center;
    padding: 10rem;
    border-radius: 7rem;
    display: none;
    top:calc(100% + 8rem);
    li{
        width: 100%;
        position: relative;
    }
    .li:active{
        opacity: 0.9;
    }
}
.hadlist_icon{
    width: 5rem;
    height: 10rem;
    margin-left: 8rem;
    position: absolute;
    top: 50%;
    margin-top: -5rem;
}
.header_menu_item{
    overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}
.sub_header_menu_item{
    font-size: 12rem;
}
.menu_children{
    display: none;
}
.fixed{
  position: fixed;
  z-index: 99;
  top:0;
  left: auto!important;
  width: 100%;
  height: 100%;
}
</style>
